<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<script>
    /*
        影子dom
            - 并非所有的元素都可以包含影子dom
            - 可以容纳影子dom的元素
                - 任何以有效名称创建的自定义元素
                 <article>
                 <aside>
                 <blockquote> 
                 <body>
                 <div>
                 <footer>
                 <h1>
                 <h2>
                 <h3>
                 <h4>
                 <h5>
                 <h6>
                 <header> 
                 <main> 
                 <nav>
                 <p>
                 <section>
                 <span>
                
            - attachShadow()
                方法需要一个 shadowRootInit 对象，返回影子 DOM 的实例。shadowRootInit
                 对象必须包含一个 mode 属性，值为"open"或"closed"
     */
    const foo = document.querySelector('#foo')
    const bar = document.querySelector('#bar')

    const openShadowDom = foo.attachShadow({mode: 'open'})
    const closedShadowDom = bar.attachShadow({mode: 'closed'})

    console.log("openShadowDom", openShadowDom) // #shadow-root (open)
    console.log("closedShadowDom", closedShadowDom) // #shadow-root (closed)

    console.log("foo.shadowRoot", foo.shadowRoot) // #shadow-root (open)
    console.log("bar.shadowRoot", bar.shadowRoot) // null


</script>
</body>
</html>